<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>登录</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<script type='text/javascript' src="js/jquery-3.2.1.js"></script>

<script type='text/javascript'>
	var code; //在全局定义验证码   
	function createCode() {
		code = "";
		//验证码的长度 
		var codeLength = 4;
		var checkCode = document.getElementById("code");
		//随机数 
		var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C',
				'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O',
				'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a',
				'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm',
				'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z');
		//循环操作 
		for (var i = 0; i < codeLength; i++) {

			//取得随机数的索引（0~35） 
			var index = Math.floor(Math.random() * 62);

			//根据索引取得随机数加到code上 
			code += random[index];
		}

		//把code值赋给验证码 
		checkCode.value = code;
	}

	//校验验证码 
	function submitForm() {
		//取得输入的验证码并转化为大写    
		code = code.toUpperCase();
		var inputCode = document.getElementById("input").value.toUpperCase();
		//若输入的验证码长度为0 
		if (inputCode.length <= 0) {
			//则弹出请输入验证码
			alert("请输入验证码！");
		} else if (inputCode != code) { //若输入的验证码与产生的验证码不一致时 
			//弹出验证码输入错误
			alert("验证码输入错误！@_@");
			//刷新验证码 
			createCode();
			//清空文本框 
			document.getElementById("input").value = "";
		} else { //输入正确时 
			$.ajax({
				type : "POST",
				url : "loginController/login",
				data : $('#loginform').serialize(),
				success : function(result) {
					if (result.success) {
						window.location.href = 'loginController/toIndex';
					} else {
						alert(result.msg);
					}
				}
			});
		}
	}

	function clearForm() {
		$('#loginform').form('clear');
	}

	//回车登录
	function enterlogin() {
		//判断用户名是否为空
		if (document.loginform.loginname.value == "") {
			return false;
		}

		//判断密码是否为空
		if (document.loginform.password.value == "") {
			return false;
		}

		if (event.keyCode == 13) {
			event.returnValue = false;
			event.cancel = true;
			submitForm();
		}
	}
</script>
<style type='text/css'>
#code {
	font-family: Arial, 宋体;
	font-style: italic;
	color: green;
	border: 0;
	padding: 2px 3px;
	letter-spacing: 3px;
	font-weight: bolder;
}
</style>
</head>

<body onload="createCode()" onkeydown="enterlogin();">
	<div class="main">
		<div class="login">
			<div class="login-top">
				<img src="images/p.png">
			</div>
			<h1>鑫隆物业管理系统</h1>
			<div class="login-bottom">
				<form method="post" name="loginform" id="loginform" onsubmit="submitForm()">
					<input type="text" placeholder="用户名" name="loginname"
						id="loginname" required=" "> <input type="password"
						id="password" name="password" class="password" placeholder="密码"
						required=" "> <input type="text" id="input"
						placeholder="验证码" required=" " /> <br /> <br /> <input
						type="text" id="code" onclick="createCode()" style="height: 40px;"
						title='点击更换验证码' /><br /> <br /> <input type="submit" value="登录">
					<br />
				</form>
				<a href="#"></a>
			</div>
		</div>
	</div>
	<div class="footer">
		<p>www.wuye.com,----鑫隆物业管理系统</p>
	</div>

</body>
</html>
